<template>
  <div class="user-index-page">
    <!-- 页面左侧信息展示 -->
    <el-card shadow="always" class="left-page">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <div>
        <div class="user-avatar">
          <user-avatar />
        </div>
        <ul class="user-info">
          <li class="u-i-item">
            <svg-icon icon-class="user" />
            用户名称
            <div class="u-i-item-value">{{ user.username }}</div>
          </li>
          <li class="u-i-item">
            <svg-icon icon-class="phone" />
            手机号码
            <div class="u-i-item-value">{{ user.phone }}</div>
          </li>
          <li class="u-i-item">
            <svg-icon icon-class="email" />
            用户邮箱
            <div class="u-i-item-value">{{ user.email }}</div>
          </li>
          <li class="u-i-item">
            <svg-icon icon-class="user2" />
            登录别名
            <div class="u-i-item-value">{{ user.loginName }}</div>
          </li>
        </ul>
      </div>
    </el-card>
    <!-- 右侧信息操作 -->
    <el-card shadow="always" class="right-page">
      <div slot="header" class="clearfix">
        <span>信息操作</span>
      </div>

      <!--可选操作标签列表-->
      <el-tabs tab-position="top" @tab-click="userOptHandle">
        <el-tab-pane label="我的消息" >
          <message-line ref="messageLine" />
        </el-tab-pane>
        <el-tab-pane label="登录记录" >
          <login-line ref="loginLine" />
        </el-tab-pane>
        <el-tab-pane label="信息修改">
          <info-update @refresh-user-info="refreshUserInfo" ref="userInfo" />
        </el-tab-pane>
        <el-tab-pane label="密码修改">
          <pwd-update ref="pwdUpdate" />
        </el-tab-pane>
        <el-tab-pane label="用户注销">
          <el-button type="danger" @click="deleteUserHandle">注销</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>

</template>

<script>
  import MessageLine from "@/components/user/message-line";
  import LoginLine from "@/components/user/login-line";
  import InfoUpdate from "@/components/user/update/base.vue";
  import PwdUpdate from "@/components/user/update/password.vue";
  import UserAvatar from "@/components/user/update/avatar.vue";

  export default {
    components: { MessageLine, LoginLine, InfoUpdate, PwdUpdate, UserAvatar },
    layout: 'admin',
    name: "admin-user-index",
    data() {
      return {
        user: {
          // 用户名字
          username: '',
          // 用户头像
          avatar: '',
          // 用户手机号
          phone: '',
          // 用户邮箱号
          email: '',
          // 用户登录别名
          loginName: '',
        },
        // 是否显示用户操作
        optShow: true,
        // 用户选中操作列表项
        tabIndex: '0',
      }
    },
    // asyncData({ app, params, query}) {
    //   return app.$axios.$get('/sys/user/info')
    //     .then(({ user }) => {
    //       return {
    //         user: {
    //           username: user.username,
    //           avatar: user.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
    //           loginName: user.loginName,
    //           phone: user.phone,
    //           email: user.email
    //         }
    //       }
    //     })
    // },
    created() {
      if (process.client) {

        this.getUserInfoHandle()

        if (this.$route.params.tabIndex === '0') {
          this.tabIndex = this.$route.params.tabIndex

          this.$nextTick(() => {
            this.$refs.messageLine.initMessageHandle()
          })
        }
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme
      },
    },
    methods: {
      // 获取用户信息事件
      getUserInfoHandle() {
        this.$axios.$get('/sys/user/info')
          .then(({ data:user }) => {
            this.user.username = user.username
            this.user.avatar = user.avatar
            this.user.phone = user.phone
            this.user.email = user.email
            this.user.loginName = user.loginName
          })
          .catch(() => {})
      },
      /**
       * 用户信息操作类型切换事件
       * @param {Object} tab 回调对象
       */
      userOptHandle(tab) {
        // 记录最新点击的标签下标
        this.tabIndex = tab.index

        if (tab.index === '0') {

          this.$refs.messageLine.initMessageHandle()

        } else if (tab.index === '1') {
          /*
            登录记录
           */
          this.$refs.loginLine.initUserLoginLineHandle()

        } else if (tab.index === '2') {
          /*
            修改用户信息
           */
          this.$refs.userInfo.initUserInfoHandle(this.user)

        } else if (tab.index === '3') {
          /*
            修改用户密码
           */
          this.$refs.pwdUpdate.resetFormHandle();
        }
      },
      // 用户展示信息刷新
      refreshUserInfo(user) {
        this.user.username = user.username
        this.user.loginName = user.loginName
        this.user.phone = user.phone
        this.user.email = user.email
      },
      /**
       * 用户注销事件
       */
      deleteUserHandle() {
        this.$confirm('您确定要注销用户吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then(() => {
          return this.$axios.$delete('/sys/user/delete/self');
        }).then(() => {
          this.notify('success', '注销成功', '欢迎您再次成为我们的用户')

          this.$store.commit('user/setUserId', '');
          this.$store.commit('user/setUsername', '');
          this.$store.commit('user/setAvatar', '');
          this.$store.commit('user/setStatus', false);

          // 从cookie中删除用户信息
          this.$cookies.remove('token');
          this.$cookies.remove('userId');
          this.$cookies.remove('username');
          this.$cookies.remove('avatar');

          this.$router.replace('/')
        }).catch(() => {});
      },
    }
  }
</script>

<!--
  css字符对应
  u -> user
  i -> info
-->
<style scoped>
  .user-index-page {
    min-height: 80vh;
    height: 100%;
    position: relative;
    box-sizing: border-box;
  }
  .user-index-page:before, .user-index-page:after {
    display: table;
    content: "";
  }
  .user-index-page:after {
    clear: both;
  }
  .user-index-page .left-page {
    height: 500px;
    width: 25%;
    float: left;
    box-sizing: border-box;
  }
  .user-index-page .right-page {
    height: 500px;
    width: 73.7%;
    margin-left: 15px;
    float: left;
    box-sizing: border-box;
  }
</style>

<!-- 左侧用户信息展示样式 -->
<style scoped>
  .left-page .user-avatar {
    text-align: center;
    margin-bottom: 20px;
  }
  .left-page .user-info {
    padding-left: 0px;
    list-style: none;
  }
  .user-info .u-i-item {
    border-bottom: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0px;
    font-size: 13px;
  }
  .user-info .u-i-item:first-child {
    border-top: 1px solid #e7eaec;
  }
  .user-info .u-i-item:last-child {
    margin-bottom: 15px;
  }
  .u-i-item-value {
    float: right !important;
  }
</style>

<!-- 穿透样式 -->
<style scoped>
  /deep/ .el-card__header {
    padding: 10px;
  }
</style>
